<template>
  <div class="calculator">
    <div class="top" ref="top">
      <div class="box" ref="box" id="box">
        <div ref="listBox" id="listBox">
          <div v-for="(item,index) in oldList" :key="'o'+index">
            <div v-for="(o,i) in item" :key="'o'+index+'i'+i">
              {{show(o)}}
            </div>
            <div style="max-height: 36px;overflow: hidden;">----------------------------------------------------------</div>
          </div>
          <div v-for="(item,index) in showList" :key="'s'+index">{{show(item)}}</div>
          <div class="now" id="nowBox">
            <label class="text" :style="{'font-size':nowFontSize+'px'}" style="overflow-x: auto;white-space: nowrap;">{{show(nowNum)}}</label>
          </div>
          <div id="sumBox" v-show="isAction">
            <label :style="{'font-size':sumFontSize+'px'}" style="overflow-x: auto;white-space: nowrap;">{{show({opt:'=',num:computSum})}}</label>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="item" @click="itemClick('c')" style="color:#fb7730;">C</div>
      <div class="item" @click="itemClick('←')">←</div>
      <div class="item" @click="itemClick('%')">%</div>
      <div class="item" @click="itemClick('/')">÷</div>

      <div class="item" @click="itemClick('7')">7</div>
      <div class="item" @click="itemClick('8')">8</div>
      <div class="item" @click="itemClick('9')">9</div>
      <div class="item" @click="itemClick('*')">×</div>

      <div class="item" @click="itemClick('4')">4</div>
      <div class="item" @click="itemClick('5')">5</div>
      <div class="item" @click="itemClick('6')">6</div>
      <div class="item" @click="itemClick('-')">-</div>

      <div class="item" @click="itemClick('1')">1</div>
      <div class="item" @click="itemClick('2')">2</div>
      <div class="item" @click="itemClick('3')">3</div>
      <div class="item" @click="itemClick('+')">+</div>

      <div class="item" @click="itemClick('&')" style="color:#fb7730;">&</div>
      <div class="item" @click="itemClick('0')">0</div>
      <div class="item" @click="itemClick('.')">.</div>
      <div class="item light" @click="itemClick('=')" style="color:#fff;">=</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "calculator",
  data() {
    return {
      nowFontSize: 48,
      sumFontSize: 24,
      isAction: false,
      nowNum: {
        opt: "",
        num: "0"
      },
      oldList: [],
      showList: []
    };
  },
  methods: {
    itemClick(action) {
      console.log(action, "action");
      let numList = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "."];
      let operatopList = ["*", "/", "+", "-", "="];
      if (numList.some(item => item == action)) {
        this.numClick(action);
      }
      if (operatopList.some(item => item == action)) {
        this.operatopClick(action);
      }
      this.$nextTick(() => {
        this.changeAtuoFontSize("#nowBox", "nowFontSize", 48);
        this.changeAtuoFontSize("#sumBox", "sumFontSize", 24);
      });
    },
    numClick(action) {
      // 限制最大15位

      if (!this.isAction && this.showList.length > 0) {
        this.showList.push({ opt: "=", num: this.computSum });
        this.oldList.push(this.showList);
        this.showList = [];
        this.nowNum.opt = "";
        this.nowNum.num = "0";
      }
      if (new Number(this.nowNum.num.replace(".", "")).toString().length > 14)
        return;
      if (action == ".") {
        if (this.nowNum.num.indexOf(".") == -1) {
          this.nowNum.num += ".";
        }
      } else {
        this.nowNum.num =
          this.nowNum.num == "0" ? action : this.nowNum.num + action;
      }
      this.isAction = true;
    },
    operatopClick(action) {
      if (action == "=") {
        if (this.isAction) {
          this.isAction = false;
          let temp = this.nowNum;
          this.showList.push(temp);
          this.nowNum = new Object();
          this.nowNum.opt = "=";
          this.nowNum.num = this.computSum;
        }
      } else {
        if (!this.isAction) {
          let temp = this.nowNum.num;
          this.showList.push(this.nowNum);
          this.oldList.push(this.showList);
          this.showList = [];
          this.nowNum = new Object();
          this.nowNum.opt = "";
          this.nowNum.num = temp;
        }
        if (this.nowNum.num == "") {
          this.nowNum.opt = action + "";
        } else {
          this.showList.push(this.nowNum);
          this.nowNum = { opt: action + "", num: "" };
        }
        this.isAction = true;
      }
    },
    scrollBottom() {
      this.$refs.box.scroll(0, this.$refs.listBox.offsetHeight);
    },
    show(obj) {
      // debugger;
      let retult = "";
      if (obj.opt) {
        let temp = { "*": "×", "/": "÷", "+": "＋", "-": "－", "=": "=" };
        retult = temp[obj.opt] + " ";
      }
      let flag = false;
      let x = "";
      let mNum = Number(obj.num).toString();
      if (mNum != "" && mNum.indexOf("e") == -1) {
        flag = mNum.indexOf(".") != -1;
        x = mNum.substr(mNum.indexOf(".") + 1);
        let s = Math.floor(mNum) + "";
        let n = s.length;
        let sl = [];
        while (n > 3) {
          sl.push(s % 1000);
          s = Math.floor(s / 1000) + "";
          n = s.length;
        }
        retult += s;
        for (let i = sl.length - 1; i >= 0; i--) {
          const item = sl[i];
          retult += "," + sl[i];
        }
      } else {
        let temp = mNum.substr(mNum.indexOf("e"));
        retult +=
          Math.floor(Number(mNum.substr(0, mNum.indexOf("e"))) * 1000000) /
            1000000 +
          temp;
      }
      return flag ? retult + "." + x : retult;
    },
    changeAtuoFontSize(elector, fontSize, def) {
      let a =
        document.querySelector(elector).offsetWidth - 20 > 0
          ? document.querySelector(elector).offsetWidth - 20
          : 0;
      let b = document.querySelector(elector).lastElementChild.offsetWidth;
      console.log(a, b);
      if (b > a) {
        this[fontSize] -= 1;
        this.$nextTick(() => {
          this.changeAtuoFontSize(elector, fontSize, def);
          this.scrollBottom();
        });
      } else if (a - b > 50 && typeof def == "number") {
        this[fontSize] = def;
        this.changeAtuoFontSize(elector, fontSize);
      } else {
        this.$nextTick(() => {
          this.scrollBottom();
        });
      }
    }
  },
  computed: {
    computSum() {
      let numStr = "";
      this.showList.forEach(item => {
        if (item.opt != "=") {
          numStr += item.opt + item.num;
        }
      });
      numStr +=
        this.nowNum.num != "" && this.nowNum.opt != "="
          ? this.nowNum.opt + this.nowNum.num
          : "";
      return this.showList.length == 0 ? this.nowNum.num : eval(numStr);
    }
  },
  watch: {
    showList(value, oldValue) {
      this.$nextTick(() => {
        // setTimeout(this.scrollBottom,100)
      });
    },
    nowNum: {
      handler(value, oldValue) {
        console.log("sss");
      },
      deep: true
    }
  },
  mounted() {
    console.log("show", this.show({ opt: "=", num: 9.99999899999999e21 }));
    this.$nextTick(() => {
      this.scrollBottom();
    });
  },
  components: {}
};
</script>

<style>
.calculator .top {
  height: 40%;
  width: 100%;
  position: relative;
}
.calculator .top .box {
  position: absolute;
  width: 100%;
  max-height: 100%;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  text-align: right;
  font-size: 24px;
  color: #484848;
  padding: 15px 20px;
}
.calculator .top .box .now {
  color: #181818;
  font-weight: 600;
}
.calculator .bottom {
  height: 60%;
  width: 100%;
  background: #fff;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.calculator .bottom .item {
  font-size: 26px;
  border-top: 1px solid #c3c5c6;
  border-right: 1px solid #c3c5c6;
  width: 25%;
  height: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.calculator .bottom .item.light {
  background: #fb7730;
}
.calculator .bottom .item.light:active {
  background: rgba(251, 119, 48, 0.8);
}
.calculator .bottom .item:active {
  background: rgba(0, 0, 0, 0.1);
}
</style>
